<template>
  <div id="layout">
    <van-nav-bar
        :title="title"
        left-text=""
        right-text="按钮"
        left-arrow
        :fixed="true"
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>

    <router-view />

    <van-tabbar v-show="isShow" v-model="active" route>
      <van-tabbar-item replace to="/" icon="home-o" name="index">主页</van-tabbar-item>
      <van-tabbar-item replace to="/team" icon="search" name="team">队伍</van-tabbar-item>
      <van-tabbar-item replace to="/nearby" icon="list-switch" name="nearby">附近</van-tabbar-item>
      <van-tabbar-item replace to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {useRouter} from "vue-router";
import {routes} from "../router";

const router = useRouter()
const isShow = ref(true)
/**
 * 根据路由修改顶部的标题
 */
const DEFAULT_TITLE = "圆梦聚友园"
const title = ref(DEFAULT_TITLE)
router.beforeEach((to, from) => {
  isShow.value = true
  const toPath = to.path;
  if (toPath === "/nearby/blog/detail") {
    isShow.value = false
  }
  const route = routes.find((route) => {
    return toPath == route.path
  })
  // 如果没有找到与要去的路由的路径相同的route，或 route的title为空就将title设置为默认的顶部标题
  if (!route || !route.title) {
    title.value = DEFAULT_TITLE
  } else {
    title.value = route.title
  }
})
const onClickLeft = () => {
  router.back();
};
const onClickRight = () => {
  router.push('/search')
};


const active = ref("index");
</script>


<style scoped>

</style>